{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-15">
                <h3 class="header smaller lighter blue">webhook列表页面</h3>
                <div class="clearfix">
                    <button class="btn btn-success" data-target="#myModal" data-toggle="modal">create new webhook</button>
                    <div class="pull-right tableTools-container"></div>
                </div>
                <div class="modal fade"  id="myModal" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h5 class="modal-title" id="myModallabel">pusher配置</h5>
                            </div>
                            <form action="{{ url_for('view.pusher-add') }}" method="post" class="form-horizontal">
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label class="control-label col-lg-3">pusher名称：</label>
                                        <div class="col-lg-9">
                                        <input type="text" value="" name="name" placeholder="name" class="form-control"></br>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-lg-3">pusher note：</label>
                                        <div class="col-lg-9">
                                            <textarea placeholder="note: " value="" name="note" class="form-control"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                <button class="btn btn-default" type="button" data-dismiss="modal">close</button>
                                    <button class="btn btn-primary" type="submit">create</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="table-header">
                    Results for "自定义机器人"
                </div>

                <!-- div.table-responsive -->

                <!-- div.dataTables_borderWrap -->
                <script>
                            function ShowWebhookList(pusher_id) {
                                $.get("/view/pusher-webhook/list/" + pusher_id, function(res) {
                                    if(res['data']) {
                                        str_html = ""
                                        data = res['data']
                                        for (var i=0; i<data.length; i++)
                                        {
                                            str_html += "<tr><td>"+data[i]['address_name']+"</td><td >"+data[i]['webhook']+"</td>";
                                            str_html += "<td>"+data[i]['secret']+"</td><td>"+data[i]['pusher_type']+"</td></tr>";
                                        }
                                        $("#webhook-list-show").html(str_html);
                                    }
                                })
                            }
                </script>
                <div>
                    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>pusher_name</th>
                                <th>pusher_url</th>
                                <th class="hidden-480">note</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            {%for item in webList%}
                            <tr>
                                <td class="center">{{item.pusher_name}}</td>
                                <td>【POST】{{item.pusher_url}}</td>
                                <td>{{item.pusher_note}}</td>
                                <td>{{item.create_time}}</td>
                                <td>
                                    <div class="hidden-sm hidden-xs action-buttons">
                                        <a class="blue" href="#" onclick="ShowWebhookList({{item.id}})", data-target="#webhook-list" data-toggle="modal">
                                            <i class="ace-icon fa fa-search-plus bigger-130"></i>
                                        </a>

                                        <a class="green" href="#" data-target="#addWebhook-{{item.id}}" data-toggle="modal">
                                            <i class="ace-icon fa fa-pencil bigger-130"></i>
                                        </a>

                                        <a class="red" href="{{ url_for(endpoint='view.pusher-del', id=item.id) }}">
                                            <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                        </a>
                                    </div>
                                    <div class="modal fade"  id="addWebhook-{{item.id}}" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                    <h5 class="modal-title" id="myModallabel">{{item.pusher_name}} Webhook配置</h5>
                                                </div>
                                                <form action="{{ url_for('view.pusher-webhook-add') }}" method="post" class="form-horizontal">
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-3">群名称：</label>
                                                            <div class="col-lg-9">
                                                            <input type="text" value="" name="address_name" placeholder="address_name" class="form-control"></br>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-3">Webhook Url：</label>
                                                            <div class="col-lg-9">
                                                            <input type="text" value="" name="webhook" placeholder="Webhook Url：" class="form-control"></br>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-3">Secret：</label>
                                                            <div class="col-lg-9">
                                                                <input type="text" placeholder="secret: " value="" name="secret" class="form-control"/>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-3">平台：</label>
                                                            <div class="col-lg-9">
                                                                <select class="chosen-select form-control" name="pusher_type" id="form-field-select-3" data-placeholder="Choose a State...">
                                                                    <option value="DingTalk">DingTalk</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <input type="hidden" name="pusher_id" value="{{ item.id }}" />
                                                    </div>
                                                    <div class="modal-footer">
                                                    <button class="btn btn-default" type="button" data-dismiss="modal">close</button>
                                                        <button class="btn btn-primary" type="submit">create</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="modal fade"  id="webhook-list" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h5 class="modal-title" id="myModallabel">WebHook List</h5>
                                </div>
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>群名称</th>
                                            <th>webhook</th>
                                            <th>secret</th>
                                            <th>pusher_type</th>
                                        </tr>
                                    </thead>
                                    <tbody id="webhook-list-show">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<!-- basic scripts -->

<!--[if !IE]> -->
<script src="{{ url_for('static', filename='assets/js/jquery-2.1.4.min.js') }}"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->

<script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>

<!-- page specific plugin scripts -->
<script src="{{ url_for('static', filename='assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.dataTables.bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/buttons.flash.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/buttons.html5.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/buttons.print.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/buttons.colVis.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/dataTables.select.min.js') }}"></script>

<!-- ace scripts -->
<script src="{{ url_for('static', filename='assets/js/ace-elements.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/ace.min.js') }}"></script>

<!-- inline scripts related to this page -->

<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='{{ url_for('static', filename='assets/js/jquery.mobile.custom.min.js') }}'>"+"<"+"/script>");
</script>

<script type="text/javascript">
    jQuery(function($) {
        //initiate dataTables plugin
        var myTable = 
        $('#dynamic-table')
        .DataTable( {
            bAutoWidth: false,
            "aoColumns": [
              { "bSortable": false },
              null, null,null, null, null,
              { "bSortable": false }
            ],
            "aaSorting": []
        } );
    
        
        
        $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
        
        new $.fn.dataTable.Buttons( myTable, {
            buttons: [
              {
                "extend": "colvis",
                "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
                "className": "btn btn-white btn-primary btn-bold",
                columns: ':not(:first):not(:last)'
              },
              {
                "extend": "copy",
                "text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
                "className": "btn btn-white btn-primary btn-bold"
              },
              {
                "extend": "csv",
                "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
                "className": "btn btn-white btn-primary btn-bold"
              },
              {
                "extend": "excel",
                "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
                "className": "btn btn-white btn-primary btn-bold"
              },
              {
                "extend": "pdf",
                "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
                "className": "btn btn-white btn-primary btn-bold"
              },
              {
                "extend": "print",
                "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
                "className": "btn btn-white btn-primary btn-bold",
                autoPrint: false,
                message: 'This print was produced using the Print button for DataTables'
              }		  
            ]
        } );
        myTable.buttons().container().appendTo( $('.tableTools-container') );
        
        //style the message box
        var defaultCopyAction = myTable.button(1).action();
        myTable.button(1).action(function (e, dt, button, config) {
            defaultCopyAction(e, dt, button, config);
            $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
        });
        
        
        var defaultColvisAction = myTable.button(0).action();
        myTable.button(0).action(function (e, dt, button, config) {
            
            defaultColvisAction(e, dt, button, config);
            
            
            if($('.dt-button-collection > .dropdown-menu').length == 0) {
                $('.dt-button-collection')
                .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
                .find('a').attr('href', '#').wrap("<li />")
            }
            $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
        });
    
        ////
    
        setTimeout(function() {
            $($('.tableTools-container')).find('a.dt-button').each(function() {
                var div = $(this).find(' > div').first();
                if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
                else $(this).tooltip({container: 'body', title: $(this).text()});
            });
        }, 500);
        
        
        
        
        
        myTable.on( 'select', function ( e, dt, type, index ) {
            if ( type === 'row' ) {
                $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
            }
        } );
        myTable.on( 'deselect', function ( e, dt, type, index ) {
            if ( type === 'row' ) {
                $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
            }
        } );
    
    
    
    
        /////////////////////////////////
        //table checkboxes
        $('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
        
        //select/deselect all rows according to table header checkbox
        $('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked;//checkbox inside "TH" table header
            
            $('#dynamic-table').find('tbody > tr').each(function(){
                var row = this;
                if(th_checked) myTable.row(row).select();
                else  myTable.row(row).deselect();
            });
        });


        
        //select/deselect a row when the checkbox is checked/unchecked
        $('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
            var row = $(this).closest('tr').get(0);
            if(this.checked) myTable.row(row).deselect();
            else myTable.row(row).select();
        });
    
    
    
        $(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();
        });
        
        
        
        //And for the first simple table, which doesn't have TableTools or dataTables
        //select/deselect all rows according to table header checkbox
        var active_class = 'active';
        $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked;//checkbox inside "TH" table header
            
            $(this).closest('table').find('tbody > tr').each(function(){
                var row = this;
                if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
            });
        });
        
        //select/deselect a row when the checkbox is checked/unchecked
        $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
            var $row = $(this).closest('tr');
            if($row.is('.detail-row ')) return;
            if(this.checked) $row.addClass(active_class);
            else $row.removeClass(active_class);
        });
    
        
    
        /********************************/
        //add tooltip for small view action buttons in dropdown menu
        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        
        //tooltip placement on right or left
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();
    
            var off2 = $source.offset();
            //var w2 = $source.width();
    
            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
        
        
        
        
        /***************/
        $('.show-details-btn').on('click', function(e) {
            e.preventDefault();
            $(this).closest('tr').next().toggleClass('open');
            $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
        });
        /***************/
        
        
        
        
        
        /**
        //add horizontal scrollbars to a simple table
        $('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
          {
            horizontal: true,
            styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
            size: 2000,
            mouseWheelLock: true
          }
        ).css('padding-top', '12px');
        */
    
    
    })
</script>
{% endblock %}